<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的订单 - 达内学子商城</title>
    <link href="../css/orders.css" rel="stylesheet"/>
    <link href="../css/header.css" rel="stylesheet"/>
    <link href="../css/footer.css" rel="stylesheet"/>
    <link href="../css/personage.css" rel="stylesheet" />
</head>
<body>
<!-- 页面顶部-->
<c:import url="header.jsp"></c:import>
<!-- nav主导航-->
<nav id="nav">
    <ul>
        <li><a href="index.html" class="acti">首页</a></li>
        <li><a href="index.html#computer" >电脑办公</a></li>
        <li><a href="index.html#stationery" >办公文具</a></li>
    </ul>
</nav>
<!-- 我的订单导航栏-->
<div id="nav_order">
    <ul>
        <li><a href="">首页<span>&gt;</span>个人中心</a></li>
    </ul>
</div>
<!--我的订单内容区域 #container-->
<div id="container" class="clearfix">
    <!-- 左边栏-->
    <c:import url="user_left_side_bar.jsp"/>
   <!-- 右边栏-->
    <div class="rightsidebar_box rt">	
        <!--标题栏-->
        <div class="rs_header">
            <span class="address_title" id="shouhuo1" style="display: none">取消添加- </span>
            <span class="address_title" id="shouhuo2">添加收货地址+</span>
            <span class="address_title" id="shouhuo3" style="display: none">取消编辑- </span>
        </div>
        <!--收货人信息填写栏-->
        <div class="rs_content">
            <div id="xinxi1">
        	<form id="tijiao" method="post">
	            <!--收货人姓名-->
	            <div class="recipients">
	                <span class="red">*</span><span class="kuan">收货人：</span><input type="text" name="receiverName" id="receiverName"/>
	            </div>
	            <!--收货人所在城市等信息-->
	            <div data-toggle="distpicker" class="address_content">
					 <span class="red">*</span><span class="kuan">省&nbsp;&nbsp;份：</span>
                    <select data-province="---- 选择省 ----" id="receiverState"></select>
					  城市：<select data-city="---- 选择市 ----" id="receiverCity"></select>
					  区/县：<select data-district="---- 选择区 ----" id="receiverDistrict"></select>
				</div> 
	            
	            
	            <!--收货人详细地址-->
	            <div class="address_particular">
	                <span class="red">*</span><span class="kuan">详细地址：</span><textarea name="receiverAddress" id="receiverAddress" cols="60" rows="3" placeholder="建议您如实填写详细收货地址"></textarea>
	            </div>
	            <!--收货人地址-->
	            <div class="address_tel">
	                <span class="red">*</span><span class="kuan">手机号码：</span><input type="tel" id="receiverMobile" name="receiverMobile"/>固定电话：<input type="text" name="receiverPhone" id="receiverPhone"/>
	            </div>
	            <!--邮政编码-->
	            <div class="address_postcode">
	                <span class="red">&nbsp;</span><span>邮政编码：</span>&nbsp;<input type="text" name="receiverZip" id="receiverZip"/>
	            </div>
	            <!--地址名称-->
	            <div class="address_name">
	                <span class="red">&nbsp;</span><span>地址名称：</span>&nbsp;<input type="text" id="addressName" name="addressName"/>如：<span class="sp">家</span><span class="sp">公司</span><span class="sp">宿舍</span>
	            </div>
	            <!--保存收货人信息-->
	            <div class="save_recipient" id="save_address">
	                保存收货人信息
	            </div>
    		</form>
            </div>

            <div id="xinxi2" style="display: none">
                <form id="tijiao2" method="post">
                    <!--收货人姓名-->
                    <div class="recipients">
                        <span class="red">*</span><span class="kuan">收货人：</span><input type="text" id="receiverName2"/>
                    </div>
                    <!--收货人所在城市等信息-->
                    <div data-toggle="distpicker" class="address_content">
                        <span class="red">*</span><span class="kuan">省&nbsp;&nbsp;份：</span>
                        <select data-province="---- 选择省 ----" id="receiverState2" onchange="shiliebiao()"></select>
                        城市：<select data-city="---- 选择市 ----" id="receiverCity2" onchange="quliebiao()"></select>
                        区/县：<select data-district="---- 选择区 ----" id="receiverDistrict2"></select>
                    </div>


                    <!--收货人详细地址-->
                    <div class="address_particular">
                        <span class="red">*</span><span class="kuan">详细地址：</span><textarea id="receiverAddress2" cols="60" rows="3" placeholder="建议您如实填写详细收货地址"></textarea>
                    </div>
                    <!--收货人地址-->
                    <div class="address_tel">
                        <span class="red">*</span><span class="kuan">手机号码：</span><input type="tel" id="receiverMobile2"/>固定电话：<input type="text" id="receiverPhone2"/>
                    </div>
                    <!--邮政编码-->
                    <div class="address_postcode">
                        <span class="red">&nbsp;</span><span>邮政编码：</span>&nbsp;<input type="text" id="receiverZip2"/>
                    </div>
                    <!--地址名称-->
                    <div class="address_name">
                        <span class="red">&nbsp;</span><span>地址名称：</span>&nbsp;<input type="text" id="addressName2"/>如：<span class="sp">家</span><span class="sp">公司</span><span class="sp">宿舍</span>
                    </div>
                    <!--保存收货人信息-->
                    <div class="save_recipient" id="save_address2">
                        保存收货人信息
                    </div>
                    <span style="display: none" id="cunid"/>
                </form>
            </div>

            <!--已有地址栏-->
            <div class="address_information_manage">
                <div class="aim_title">
                    <span class="dzmc dzmc_title">地址名称</span><span class="dzxm dzxm_title">姓名</span><span class="dzxq dzxq_title">地址详情</span><span class="lxdh lxdh_title">联系电话</span><span class="operation operation_title">操作</span>
                </div>
                <div id="tianjiaxinxi">
                    <div class="aim_content_two">
                        <span class="dzmc dzmc_normal">家里</span>
                        <span class="dzxm dzxm_normal">杨洋</span>
                        <span class="dzxq dzxq_normal">北京市大兴区西红门镇瑞海家园</span>
                        <span class="lxdh lxdh_normal">13788882346</span>
                        <span class="operation operation_normal">
                            <span class="aco_change">修改</span>|<span class="aco_delete">删除</span>
                        </span>
                        <span class="swmr swmr_normal">设为默认</span>
                    </div>
                    <div class="aim_content_three">
                        <span class="dzmc dzmc_normal">宿舍</span>
                        <span class="dzxm dzxm_normal">杨洋</span>
                        <span class="dzxq dzxq_normal">山西省小店区山西大学商务学院</span>
                        <span class="lxdh lxdh_normal">13799992347</span>
                        <span class="operation operation_normal">
                            <span class="aco_change">修改</span>|<span class="aco_delete">删除</span>
                        </span>
                        <span class="swmr swmr_normal">设为默认</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 品质保障，私人定制等-->
<div id="foot_box">
    <div class="icon1 lf">
        <img src="../images/footer/icon1.png" alt=""/>

        <h3>品质保障</h3>
    </div>
    <div class="icon2 lf">
        <img src="../images/footer/icon2.png" alt=""/>

        <h3>私人定制</h3>
    </div>
    <div class="icon3 lf">
        <img src="../images/footer/icon3.png" alt=""/>

        <h3>学员特供</h3>
    </div>
    <div class="icon4 lf">
        <img src="../images/footer/icon4.png" alt=""/>

        <h3>专属特权</h3>
    </div>
</div>
<!-- 页面底部-->
<div class="foot_bj">
    <div id="foot">
        <div class="lf">
             <p class="footer1"><img src="../images/footer/logo.png" alt="" class=" footLogo"/></p>
             <p class="footer2"><img src="../images/footer/footerFont.png" alt=""/></p>
        </div>
        <div class="foot_left lf">
            <ul>
                <li><a href="#"><h3>买家帮助</h3></a></li>
                <li><a href="#">新手指南</a></li>
                <li><a href="#">服务保障</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>商家帮助</h3></a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>关于我们</h3></a></li>
                <li><a href="#">关于达内</a></li>
                <li><a href="#">联系我们</a></li>
                <li>
                    <img src="../images/footer/wechat.png" alt=""/>
                    <img src="../images/footer/sinablog.png" alt=""/>
                </li>
            </ul>
        </div>
        <div class="service">
            <p>学子商城客户端</p>
            <img src="../images/footer/ios.png" class="lf">
            <img src="../images/footer/android.png" alt="" class="lf"/>
        </div>
        <div class="download">
            <img src="../images/footer/erweima.png">
        </div>
		<!-- 页面底部-备案号 #footer -->
        <div class="record">
            &copy;2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/jquery.page.js"></script>
<script type="text/javascript" src="../js/orders.js"></script>
<%--<script type="text/javascript" src="../js/distpicker.data.js"></script>--%>
<script type="text/javascript" src="../js/distpicker.js"></script>
<script type="text/javascript" src="../js/personal.js"></script>
<script type="text/javascript">
	$(".lxdh_normal").each(function(i,e) {
		var phone = $(e).html();
		$(e).html(changePhone(phone));
	});

	//0.启动时加载,省份列表
    $(function () {
        $.ajax({
            url:"../dict/provinces.do",
            type:"get",
            dataType:"json",
            success:function (result) {
                if (result.state == 0) {
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var ops = op.replace('[name]', data[i].provinceName);
                        // ops = $(ops);
                        // ops.data('provinceCode2', data[i].provinceCode);
                        ops = ops.replace('[code]', data[i].provinceCode);
                        $('#receiverState2').append(ops);
                    }
                }
            }
        });

        //启动时加载地址信息
        showsite();
        //隐藏添加地址栏
        $('#xinxi').hide();
        //加载完页面以后加载
        //左边栏部分的显示问题
        $("#leftsidebar_box dd").hide();
        $("#leftsidebar_box .address dd").show();
        $(".my_order td img").attr("src","../images/myOrder/myOrder2.png");
        $(".address td img").attr("src","../images/myOrder/myOrder1.png");

        //1.启动时加载地址列表,获取省列表
        var sel = $('#receiverState');
        sel.empty();
        $.ajax({
            url:"../dict/provinces.do",
            type:"get",
            dataType:"json",
            success:function (result) {
                if (result.state == 0) {
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var ops = op.replace('[name]', data[i].provinceName);
                        // ops = $(ops);
                        // ops.data('provinceCode', data[i].provinceCode);
                        ops = ops.replace('[code]', data[i].provinceCode);
                        sel.append(ops);
                    }
                }
            },
        });
    });

    //2.获取市列表
    $('#receiverState').change(function () {
        $('#receiverCity').empty();
        // var provinceCode = $('#receiverState option:selected').data('provinceCode');
        var provinceCode = $('#receiverState option:selected').val();
        console.log(provinceCode);
        $.ajax({
            url:'../dict/cities.do',
            type:'get',
            data:{provinceCode:provinceCode},
            dataType:'json',
            success:function (result) {
                if (result.state == 0) {
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var ops = op.replace('[name]', data[i].cityName);
                        // ops = $(ops);
                        // ops.data('cityCode', data[i].cityCode);
                        ops = ops.replace('[code]', data[i].cityCode);
                        $('#receiverCity').append(ops);
                    }
                }
            }
        });
    });

    //3.获取区列表
    $('#receiverCity').change(function () {
        $('#receiverDistrict').empty();
        // var cityCode = $('#receiverCity option:selected').data('cityCode');
        var cityCode = $('#receiverCity option:selected').val();
        var url = "../dict/area.do";
        var data = {cityCode:cityCode};
        $.getJSON(url, data, function (resule) {
            if (resule.state == 0) {
                var data = resule.data;
                for (var i = 0; i < data.length; i++) {
                    var ops = op.replace('[name]', data[i].areaName);
                    ops = ops.replace('[code]', data[i].areaCode);
                    $('#receiverDistrict').append(ops);
                }
            }
        });
    });


    //4.添加地址栏显示和隐藏
    $('#shouhuo1').click(function () {
        $('#shouhuo1').hide();
        $('#shouhuo2').show();
        $('#xinxi1').hide();
        $('#xinxi2').hide();

    });
    $('#shouhuo2').click(function () {
        $('#shouhuo1').show();
        $('#shouhuo2').hide();
        $('#xinxi1').show();
        $('#xinxi2').hide();
        //reset 是js原生函数，$('#tijiao)为jq对象是无法直接使用的，
        // 增加一个下标效果类似于遍历以后的元素，遍历后就是dom对象了
        //作用为  清空   from表单
        $('#tijiao')[0].reset();
    });


	//4.新增加地址保存功能
    $('#save_address').click(function () {
        var data = {
            recvName:$('#receiverName').val(),
            recvProvince:$('#receiverState').val(),
            recvCity:$('#receiverCity').val(),
            recvArea:$('#receiverDistrict').val(),
            recvAddr:$('#receiverAddress').val(),
            recvPhone:$('#receiverMobile').val(),
            recvTel:$('#receiverPhone').val(),
            recvZip:$('#receiverZip').val(),
            recvTag:$('#addressName').val()
        };
        var url = '../address/add.do';
        $.post(url, data, function (result) {
            if (result.state == 0) {
                // alert('保存成功');
                // showsite();
                location.href = 'list.do';
            }else {
                var message = result.message;
                alert(message);
            }
        });

    });

    //5.显示已添加地址
    function showsite() {
        var url = 'get_list.do';
        $.ajax({
            url:url,
            type:'get',
            dataTp:'json',
            success:function (result) {
                if (result.state == 0) {
                    $('#tianjiaxinxi').empty();
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var a = htmlTemplate;
                        a = a.replace('%tag%', data[i].recvTag);
                        a = a.replace('[name]', data[i].recvName);
                        a = a.replace('[address]', data[i].recvDistrict);
                        a = a.replace('[phone]', data[i].recvPhone);
                        a = a.replace(/ID/g, data[i].id);
                        if (data[i].isDefault == 1){
                            a = a.replace('[content_active]', 'aim_active');
                            a = a.replace('[tag_type]', 'dzmc_active');
                            a = a.replace('设为默认', '默认');
                        }else {
                            a = a.replace('[content_active]', '');
                            a = a.replace('[tag_type]', 'dzmc_normal');
                            a = a.replace('默认', '设为默认');
                        }
                        $('#tianjiaxinxi').append(a);
                    }
                    $('#shouhuo1').hide();
                    $('#shouhuo2').show();
                    $('#xinxi1').hide();
                    $('#xinxi2').hide();
                }else {
                    alert(result.message);
                }
            }
        });
    }

    //6.删除选中已添加地址
    function deleteAddress(id) {
        if(confirm("确定删除吗？")){
            var url = 'delete_address.do';
            var data = {id:id};
            $.ajax({
                url:url,
                type:'post',
                data:data,
                dataType:'json',
                success:function (result) {
                    if (result.state == 0) {
                        showsite();
                        // location.href = 'list.do';
                    }else {
                        var message = result.message;
                        alert(message);
                    }
                },
                error:function () {
                    alert('登录超时');
                    location.href = '../user/login.do';
                }
            });
        }
    }

    //7.1修改选中已添加地址
    function updateAddress(id) {
        $('#cunid').val(id);
        $('#shouhuo1').hide();
        $('#shouhuo2').hide();
        $('#shouhuo3').show();
        $('#xinxi1').hide();
        $('#xinxi2').show();
        $('#tijiao2')[0].reset();
        var url ='handle_select.do';
        var data ={id:id};
        $.post(url, data, function (result) {
            if (result.state == 0) {
                var data = result.data;
                $('#receiverName2').val(data.recvName);
                $("#receiverState2").val(data.recvProvince);
                var recvProvince = data.recvProvince;
                var recvCity = data.recvCity;
                var recvArea = data.recvArea;

                //加载市列表后,调用加载区列表
                shiliebiao(recvCity, recvArea);
                $("#receiverDistrict2").val(recvArea);

                $('#receiverAddress2').val(data.recvAddr);
                $('#receiverMobile2').val(data.recvPhone);
                $('#receiverPhone2').val(data.recvTel);
                $('#receiverZip2').val(data.recvZip);
                $('#addressName2').val(data.recvTag);
            }
        });

    }

    //7.2 取消修改
    $('#shouhuo3').click(function () {
        $('#shouhuo3').hide();
        $('#shouhuo2').show();
        $('#xinxi1').hide();
        $('#xinxi2').hide();
    });

    //7.3加载修改页面的市列表
    function shiliebiao(recvCity, recvArea) {
        $('#receiverCity2').empty();
        var recvProvince = $("#receiverState2 option:selected").val();
        $.ajax({
            url:'../dict/cities.do',
            type:'get',
            data:{provinceCode:recvProvince},
            dataType:'json',
            success:function (result) {
                if (result.state == 0) {
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        var ops = op.replace('[name]', data[i].cityName);
                        ops = ops.replace('[code]', data[i].cityCode);
                        $('#receiverCity2').append(ops);
                    }
                    $("#receiverCity2").val(recvCity);
                    quliebiao(recvArea);
                }
            }
        });
    }

    //7.4加载修改页面的区列表
    function quliebiao(recvArea) {
        $('#receiverDistrict2').empty();
        var cityCode = $("#receiverCity2 option:selected").val();
        var url = "../dict/area.do";
        var data = {cityCode:cityCode};
        $.getJSON(url, data, function (resule) {
            if (resule.state == 0) {
                var data = resule.data;
                for (var i = 0; i < data.length; i++) {
                    var ops = op.replace('[name]', data[i].areaName);
                    ops = ops.replace('[code]', data[i].areaCode);
                    $('#receiverDistrict2').append(ops);
                }
                $("#receiverDistrict2").val(recvArea);

            }
        });
    }

    //7.5点击保存按钮后修改数据
    $('#save_address2').click(function () {
        var url = 'handle_update.do';
        var id = $('#cunid').val();
        var data = {
            id:id,
            recvName:$('#receiverName2').val(),
            recvProvince:$('#receiverState2').val(),
            recvCity:$('#receiverCity2').val(),
            recvArea:$('#receiverDistrict2').val(),
            recvAddr:$('#receiverAddress2').val(),
            recvPhone:$('#receiverMobile2').val(),
            recvTel:$('#receiverPhone2').val(),
            recvZip:$('#receiverZip2').val(),
            recvTag:$('#addressName2').val()
        };
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataTypt:'json',
            success:function (result) {
                if (result.state == 0) {
                    alert('修改成功');
                    // location.href = 'list.do';
                    showsite();
                }else {
                    var message = result.message;
                    alert(message);
                }
            },
            error:function () {
                location.href = '../user/login.do';
            }
        });
    });

    //设置默认地址
    function setDefault(id) {
        console.log(id);
        var url = 'set_default.do';
        var data = {id:id};
        var dqmr = $(this);
        $.post(url, data, function (result) {
            if (result.state == 0) {
                showsite();
            }else {
                alert('设置失败');
            }
        });
    }

    //省下拉列表
    // var op = "<option>[name]</option>";
    var op = "<option value= \"[code]\">[name]</option>";

    //地址显示
    var htmlTemplate =
        "       <div class=\"aim_content_one [content_active]\">\n"+
"                    <span class=\"dzmc [tag_type]\">%tag%</span>\n"+
"                    <span class=\"dzxm dzxm_normal\">[name]</span>\n"+
"                    <span class=\"dzxq dzxq_normal\">[address]</span>\n"+
"                    <span class=\"lxdh lxdh_normal\">[phone]</span>\n"+
"                    <span class=\"operation operation_normal\">\n"+
"                       <span class=\"aco_change \" value='ID' onclick='updateAddress(ID)'>修改</span>|<span class=\"aco_delete\" value='ID' onclick='deleteAddress(ID)'>删除</span>\n"+
"                    </span>\n"+
"                    <span class=\"swmr swmr_normal \" id='ID'><a href='###' id='mr' value='ID' onclick='setDefault(ID)'>设置为默认</a></span>\n" +
"               </div>"
</script>

</html>